// 计算任意数字之和
function sum() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i]
    }
    return sum;
}

// 求任意数中的最小值
function minNum() {
    var min = arguments[0];
    for (var i = 0; i < arguments.length; i++) {
        if (min > arguments[i]) {
            min = arguments[i]
        }
    }
    // console.log(min);
    return min;
}

// 求任意数中的最大值
function maxNum() {
    var max = arguments[0];
    for (var i = 0; i < arguments.length; i++) {
        if (max < arguments[i]) {
            max = arguments[i]
        }
    }
    // console.log(min);
    return max;
}

// 生成一个任意范围内的随机整数
function getRandomNum(a, b) {
    if (a > b) {
        return parseInt(Math.random() * (a - b + 1)) + b
    }
    return parseInt(Math.random() * (b - a + 1)) + a
}

// 封装一个随机颜色（不依赖 getRandomNum(a, b))
function getRandomColor(a) {
    if (a === 16) {
        var str = '0123456789abcdef';
        var res = '';
        for (var i = 0; i < 6; i++) {
            var idx = parseInt(Math.random() * 16);
            res += str[idx];
        }
        return '#' + res;
    }

    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);
    return 'rgb(' + r + ',' + g + ',' + b + ')'
}

/* 
    封装一个函数来写事件的兼容
    可变的东西都可以当成函数的参数
    【1】事件源
    【2】事件类型
    【3】事件出来函数
*/
function bindEvent(ele, type, fn) {
    // 做兼容判断
    if (ele.addEventListener) {
        ele.addEventListener(type, function () {
            fn();
        })
    } else {
        ele.attachEvent('on' + type, function () {
            fn();
        })
    }
}

/* 
    封装获取元素的函数：
    函数的实参形式：
    【1】#id名    表示通过id名获取元素
    【2】.class名 表示通过class名获取元素
    【3】标签名    表示同给标签名获取元素
*/
function getEle(ele) {
    // substr(参数1，参数2)
    // 参数1表示开始的索引位置
    // 参数2表示截取个数，如果没有参数2表示从开始位置截取到最后
    var str1 = ele.substr(0, 1); //拿到前面的字符
    var str2 = ele.substr(1);

    if (str1 === '#') {
        return document.getElementById(str2)
    } else if (str1 === '.') {
        return document.getElementsByClassName(str2);
    } else {
        return document.getElementsByTagName(ele);
    }
}

// 获取非行内样式的
function getStyle(ele, attr) {
    var style;
    if (window.getComputedStyle) {
        style = window.getComputedStyle(ele)[attr];
    } else {
        style = ele.currentStyle[attr];
    }
    return style;
}

// 动画函数
/*
    【1】dom节点
    【2】对象，要改变属性和属性值
    【3】回调函数（动画结束之后要执行的操作）
*/
function move(ele, obj, callback) {

    let timerLen = 0;
    for (const attr in obj) {

        // 防止抖动
        clearInterval(ele[attr]);

        timerLen++;
        ele[attr] = setInterval(() => {
            let curStyle;
            if (attr === 'opacity') {
                curStyle = getStyle(ele, attr) * 100;
            } else {
                curStyle = parseInt(getStyle(ele, attr));
            }
            let speed = (obj[attr] - curStyle) / 5;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  //取整
            if (curStyle === obj[attr]) {
                clearInterval(ele[attr]);
                timerLen--
                if (timerLen === 0) {
                    callback && callback();
                }
            } else {
                if (attr === 'opacity') {
                    ele.style[attr] = (speed + curStyle) / 100;
                } else {
                    ele.style[attr] = speed + curStyle + 'px';
                }
            }
        }, 30)
    }
}

//放大镜
class Enlarge{
    constructor(ele){
        this.ele = ele;
        //获取页面显示图片容器
        this.show = this.ele.querySelector(".show");
        //获取遮罩层
        this.mask = this.show.querySelector(".mask");
        //获取小图片容器
        this.list = this.ele.querySelector(".list");
        this.p = this.list.querySelectorAll("p");
        //获取放大镜容器
        this.enlarge = this.ele.querySelector(".enlarge");
        
        this.init();
        this.change()
    }
    init(){
        //添加mask在show里移动事件
        this.show.addEventListener("mouseover",() =>{
            this.mask.style.display = this.enlarge.style.display = "block";
           
            this.setStyle();
            this. move();
        })
         //添加mask在show里移出事件
         this.show.addEventListener("mouseout",() =>{
            this.mask.style.display = this.enlarge.style.display = "none";
        })
        
    }
    setStyle(){
        //分别求出遮罩层，图片容器show，背景图的尺寸, 设置放大镜容器宽高
        //求出遮罩层mask的尺寸(宽，高)
        this.maskWidth = this.mask.offsetWidth;
        this.maskHeight = this.mask.offsetHeight;

        //求出图片容器show的尺寸(宽，高)
        this.showWidth = this.show.offsetWidth;
        this.showHeight = this.show.offsetHeight;

        //求出enlarge内背景图的尺寸(宽，高)
        let red = window.getComputedStyle(this.enlarge).backgroundSize.split(" ");
        this.W = parseInt(red[0]);
        this.H = parseInt(red[1]);

        //求出放大镜容器enlarge的尺寸(宽，高)    mask尺寸 ：show尺寸  =  放大镜容器尺寸 :  放大镜背景图尺寸
        this.enlargeWidth = this.maskWidth / this.showWidth *  this.W + "px";
        this.enlargeHeight = this.maskHeight / this.showHeight *  this.H + "px";
        
    }
    move(){
        //鼠标移动mask跟着在show内移动
        this.show.addEventListener("mousemove",e =>{
            
            let x = e.clientX - this.ele.offsetLeft - this.maskWidth / 2;
            let y = e.clientY - this.ele.offsetTop - this.maskHeight / 2;

            if( x <= 0){
                x = 0;
            }
            if( y <= 0){
                y = 0;
            }   
            if( x >= this.showWidth - this.maskWidth){
                x = this.showWidth - this.maskWidth
            }
            if( y >= this.showHeight - this.maskHeight){
                y = this.showHeight - this.maskHeight
            }

            this.mask.style.left = x + "px";
            this.mask.style.top = y + "px";

             //背景图的移动距离 = 遮罩层的移动距离  / show盒子的尺寸  * 背景图的尺寸

            let f1 = x / this.showWidth *  this.W;
            let f2 = y / this.showHeight *  this.H;
            this.enlarge.style.backgroundPosition = `${-f1}px  ${-f2}px`;
        })
     }
    change(){
        let _this = this;
        for(var i=0;i<_this.p.length;i++){

            _this.p[i].onclick = function(e){

                for(var j=0;j<_this.p.length;j++){
                   _this.p[j].classList.remove("active");
                }
                this.classList.add("active");

                //获取show里的img
                let img = _this.show.querySelector("img");
                //替换show里面的图片
                img.setAttribute("src",e.target.getAttribute("img1"));
                //替换enlarge里面的图片
                _this.enlarge.style.backgroundImage = `url(${e.target.getAttribute("imgBig")})`;

            }
        }
    }

}
